<template>
  <div class="warper" ref="warper">
    <div class="cont">
      <div class="wk">
        <p>网络课程</p>
        <div class="lei1">
          <div v-for="(itme,index) of gongcheng" :key="index" @click="headclick(index)" :class="{curr:num==index}">
            <img :src="itme" alt="">
          </div>
        </div>
        <div class="vivw" v-show="istrue">
          <ul v-if='list'>
            <li v-for="(ietm,index) of list" :key="index">
              <a href="">{{ietm.name}}</a>
            </li>
          </ul>
        </div>
        <div class="lei1">
          <div v-for="(itme,index) of gongcheng1" :key="index" @click="headclick1(index)" :class="{curr:num1==index}">
            <img :src="itme" alt="">
          </div>
        </div>
        <div class="vivw" v-show="istrue1">
          <ul v-if='list1'>
            <li v-for="(ietm,index) of list1" :key="index">
              <a href="">{{ietm.name}}</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="ms">
        <p>面授课程</p>
        <div class="lei1">
          <div v-for="(itme,index) of gongcheng2" :key="index" @click="headclick2(index)" :class="{curr:num2==index}">
            <img :src="itme" alt="">
          </div>
        </div>
        <div class="vivw" v-show="istrue2">
          <ul v-if='list2'>
            <li v-for="(ietm,index) of list2" :key="index">
              <a href="">{{ietm.name}}</a>
            </li>
          </ul>
        </div>
      </div>
      <p class="bot">千人师资十六年经验积累两百人课程研发团队</p>
    </div>
  </div>
</template>
<script>
import Bscroll from "better-scroll";
export default {
  name: "xiangmu",
  data() {
    return {
      gongcheng: [
        "/static/images/xiangmu1.png",
        "/static/images/xiangmu2.png",
        "/static/images/xiangmu3.png"
      ],
      gongcheng1: [
        "/static/images/xiangmu4.png",
        "/static/images/xiangmu5.png",
        "/static/images/xiangmu6.png"
      ],
      gongcheng2: [
        "/static/images/xiangmu7.png",
        "/static/images/xiangmu8.png",
        "/static/images/xiangmu9.png"
      ],
      shuju: {
        gongcheng: [
          {
            url: "",
            name: "一级建造师"
          },
          {
            url: "",
            name: "二级建造师"
          },
          {
            url: "",
            name: "造价工程师"
          },
          {
            url: "",
            name: "安全工程师"
          },
          {
            url: "",
            name: "二级建筑师"
          },
          {
            url: "",
            name: "注册建筑师"
          },
          {
            url: "",
            name: "电气工程师"
          },
          {
            url: "",
            name: "监理工程师"
          },
          {
            url: "",
            name: "消防工程师"
          }
        ],
        caikuai: [
          {
            url: "",
            name: "注册会计师"
          },
          {
            url: "",
            name: "初级会计师"
          },
          {
            url: "",
            name: "中级会计职称"
          },
          {
            url: "",
            name: "经济师"
          },
          {
            url: "",
            name: "税务师"
          }
        ],
        yiyao: [
          {
            url: "",
            name: "执业药师"
          },
          {
            url: "",
            name: "执业医师"
          },
          {
            url: "",
            name: "护士资格"
          }
        ],
        kaoyan: [
          {
            url: "",
            name: "在职研究生"
          },
          {
            url: "",
            name: "MBA"
          },
          {
            url: "",
            name: "MPA"
          },
          {
            url: "",
            name: "MPAcc"
          },
          {
            url: "",
            name: "EMBA"
          }
        ],
        xueli: [
          {
            url: "",
            name: "中国地质大学"
          },
          {
            url: "",
            name: "中国石油大学"
          },
          {
            url: "",
            name: "北京理工大学"
          },
          {
            url: "",
            name: "山东大学"
          },
          {
            url: "",
            name: "中专"
          }
        ],
        fakao: [
          {
            url: "",
            name: "银行招聘"
          }
        ],
        beijing: [
          {
            url: "",
            name: "一级建造师"
          },
          {
            url: "",
            name: "资料员"
          },
          {
            url: "",
            name: "材料员"
          },
          {
            url: "",
            name: "二级建造师"
          },
          {
            url: "",
            name: "机械员"
          },
          {
            url: "",
            name: "施工员"
          },
          {
            url: "",
            name: "造价工程师"
          },
          {
            url: "",
            name: "质检员"
          },
          {
            url: "",
            name: "试验员"
          },
          {
            url: "",
            name: "安全工程师"
          },
          {
            url: "",
            name: "监理员"
          },
          {
            url: "",
            name: "合同员"
          },
          {
            url: "",
            name: "消防工程师"
          },
          {
            url: "",
            name: "安全员"
          },
          {
            url: "",
            name: "测量员"
          },
          {
            url: "",
            name: "造价员"
          },
          {
            url: "",
            name: "消防员"
          },
          {
            url: "",
            name: "劳动力管理员"
          },
          {
            url: "",
            name: "教师资格证"
          },
          {
            url: "",
            name: "公务员"
          }
        ],
        nanjing: [
          {
            url: "",
            name: "一级建造师"
          },
          {
            url: "",
            name: "二级建造师"
          },
          {
            url: "",
            name: "消防工程师"
          },
          {
            url: "",
            name: "造价工程师"
          },
          {
            url: "",
            name: "安全工程师"
          }
        ],
        shanghai: [
          {
            url: "",
            name: "一级建造师"
          },
          {
            url: "",
            name: "二级建造师"
          },
          {
            url: "",
            name: "消防工程师"
          },
          {
            url: "",
            name: "造价工程师"
          },
          {
            url: "",
            name: "安全工程师"
          }
        ]
      },
      list: [],
      list1: [],
      list2: [],
      num: null,
      num1: null,
      num2: null,
      istrue: false,
      istrue1: false,
      istrue2: false,
      index1: null,
      index2: null,
      index3: null
    };
  },
  methods: {
    headclick(index) {
      if (!this.istrue) {
        this.istrue = true;
        if (index == 0) {
          this.list = this.shuju.gongcheng;
          this.num = index;
        } else if (index == 1) {
          this.list = this.shuju.caikuai;
          this.num = index;
        } else {
          this.list = this.shuju.yiyao;
          this.num = index;
        }
        this.index1 = index;
      } else {
        if (this.index1 != index) {
          this.istrue = true;
          if (index == 0) {
            this.list = this.shuju.gongcheng;
            this.num = index;
          } else if (index == 1) {
            this.list = this.shuju.caikuai;
            this.num = index;
          } else {
            this.list = this.shuju.yiyao;
            this.num = index;
          }
          this.index1 = index;
        } else {
          console.log(1);
          this.istrue = false;
          this.num = null;
        }
        // if (index == 0) {
        //   this.list = this.shuju.gongcheng;
        //   this.num = index;
        // } else if (index == 1) {
        //   this.list = this.shuju.caikuai;
        //   this.num = index;
        // } else {
        //   this.list = this.shuju.yiyao;
        //   this.num = index;
        // }
        // this.index1 = index;
      }
    },
    headclick1(index) {
      if (!this.istrue1) {
        this.istrue1 = true;
        if (index == 0) {
          this.list1 = this.shuju.kaoyan;
          this.num1 = index;
        } else if (index == 1) {
          this.list1 = this.shuju.xueli;
          this.num1 = index;
        } else {
          this.list1 = this.shuju.fakao;
          this.num1 = index;
        }
        this.index2 = index;
      } else {
        if (this.index2 != index) {
          this.istrue1 = true;
          if (index == 0) {
            this.list1 = this.shuju.kaoyan;
            this.num1 = index;
          } else if (index == 1) {
            this.list1 = this.shuju.xueli;
            this.num1 = index;
          } else {
            this.list1 = this.shuju.fakao;
            this.num1 = index;
          }
          this.index2 = index;
        } else {
          this.istrue1 = false;
          this.num1 = null;
        }
        // if (index == 0) {
        //   this.list = this.shuju.gongcheng;
        //   this.num = index;
        // } else if (index == 1) {
        //   this.list = this.shuju.caikuai;
        //   this.num = index;
        // } else {
        //   this.list = this.shuju.yiyao;
        //   this.num = index;
        // }
        // this.index1 = index;
      }
    },
    headclick2(index) {
      if (!this.istrue2) {
        this.istrue2 = true;
        if (index == 0) {
          this.list2 = this.shuju.nanjing;
          this.num2 = index;
        } else if (index == 1) {
          this.list2 = this.shuju.shanghai;
          this.num2 = index;
        } else {
          this.list2 = this.shuju.beijing;
          this.num2 = index;
        }
        this.index3 = index;
      } else {
        if (this.index3 != index) {
          this.istrue2 = true;
          if (index == 0) {
            this.list2 = this.shuju.nanjing;
            this.num2 = index;
          } else if (index == 1) {
            this.list2 = this.shuju.shanghai;
            this.num2 = index;
          } else {
            this.list2 = this.shuju.beijing;
            this.num2 = index;
          }
          this.index3 = index;
        } else {
          this.istrue2 = false;
          this.num2 = null;
        }
        // if (index == 0) {
        //   this.list = this.shuju.gongcheng;
        //   this.num = index;
        // } else if (index == 1) {
        //   this.list = this.shuju.caikuai;
        //   this.num = index;
        // } else {
        //   this.list = this.shuju.yiyao;
        //   this.num = index;
        // }
        // this.index1 = index;
      }
    }
  },
  mounted() {
    // this.list = this.shuju.gongcheng;
    //这里遇到的坑如果声明的变量为空字符串这会被转义为0
    // console.log(" " == 0);
    this.warper = new Bscroll(this.$refs.warper);
  }
};
</script>

<style scoped>
.warper {
  position: absolute;
  top: 7.5rem;
  overflow: hidden;
  left: 0;
  bottom: 4.5rem;
  right: 0;
  background: #f6f6f6;
}
.cont {
  background: #f6f6f6;
  overflow: hidden;
}
.cont p.bot {
  font-size: 1rem;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: #ff3333;
}
.wk {
  margin-top: 2rem;
  margin-left: 1rem;
  margin-right: 1rem;
  background: #fff;
  padding-bottom: 1rem;
}

.wk .lei1 {
  display: flex;
}
.wk .lei1 div {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  flex: 1;
}
.wk .lei1 div:nth-child(1) {
  border: 1px solid #eaeaea;
  border-left: 0;
  border-right: 0;
}
.wk .lei1 div:nth-child(2) {
  border: 1px solid #eaeaea;
}
.wk .lei1 div:nth-child(3) {
  border: 1px solid #eaeaea;
  border-left: 0;
  border-right: 0;
}
.wk .lei1 div.curr {
  border-top: 2px solid #f84849;
  border-bottom: 0;
}
.wk .lei1 div img {
  width: 100%;
}
.wk p {
  font-size: 1.5rem;
  padding-top: 1rem;
  margin-left: 1rem;
  padding-bottom: 1rem;
  margin-right: 1rem;
}
.vivw {
  padding-top: 0.5rem;
  padding-bottom: 1rem;
}
.vivw ul {
  overflow: hidden;
}
.vivw ul li {
  width: 25%;
  margin-left: 0.9rem;
  margin-right: 0.9rem;
  float: left;
  margin-top: 0.5rem;
}
.vivw ul li a {
  width: 100%;
  height: 2rem;
  border: 1px solid #eaeaea;
  border-radius: 5px;
  line-height: 2rem;
  text-align: center;
  display: block;
  color: #333333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ms {
  margin-top: 2rem;
  margin-left: 1rem;
  margin-right: 1rem;
  background: #fff;
  padding-bottom: 1rem;
}
.ms .lei1 {
  display: flex;
}
.ms .lei1 div {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  flex: 1;
}
.ms .lei1 div img {
  width: 100%;
}
.ms .lei1 div:nth-child(1) {
  border: 1px solid #eaeaea;
  border-left: 0;
  border-right: 0;
}
.ms .lei1 div:nth-child(2) {
  border: 1px solid #eaeaea;
}
.ms .lei1 div:nth-child(3) {
  border: 1px solid #eaeaea;
  border-left: 0;
  border-right: 0;
}
.ms .lei1 div.curr {
  border-top: 2px solid #f84849;
  border-bottom: 0;
}
.ms p {
  font-size: 1.5rem;
  padding-top: 1rem;
  margin-left: 1rem;
  padding-bottom: 1rem;
  margin-right: 1rem;
}
</style>